<template>
    <div style="width: 100%; height: 100%;">
      <div style="width: 100%; height: 500px;margin-left: 10px;" ref="mychart" ></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
     //  数据可视化
      props:{
          TodayData:[1200, 2230, 1900, 2100, 3500, 4200, 3985],
          WeekData:[],
          MonthData:[],
          color:'#fff',
      },
  
      data(){
          return {
              Tdata:[],
              Wdata:[],
              Mdata:[],
              option : {
                title:{
                        text:'主要景点门票售卖情况',
                        left:'center',
                        top:'20px',
                        textStyle: {
                            color: '#fff',  // 设置标题文字颜色为蓝色
                            fontSize: 14,    // 设置标题文字大小为18px
                            fontWeight: 'bold'  // 设置标题文字加粗
                        }
                    },
                tooltip: {
                    trigger: 'item',
                    formatter: function(e) {
                        // params 是一个数组，包含了触发提示框的所有数据项信息
                       
                        var result = e.value + '<br>'; // 假设第一个数据项包含了名称信
                        return result;
                    }
                },
                legend: {
                        // Try 'horizontal'
                        orient: 'horizontal',
                     
                        right: '40',
                        top: '2',
                        itemWidth: 20,  // 图例项的宽度
                         itemHeight: 10,  // 图例项的高度
                        textStyle: {
                        color: '#ccc'
                        // ...
                        }
                    },
                    xAxis: {
                        name:'景点名',
                        data: ['景点1', '景点2', '景点3', '景点4', '景点5', '景点6', '景点7'],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'  // 设置坐标轴线的颜色为白色
                            }
                        },
                        axisLabel: {
                                color:'#fff',// x轴字体颜色
                               
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name: '数量',
                       
                        axisLine: {
                            lineStyle: {
                                color: '#fff'  // 设置坐标轴线的颜色为白色
                            }
                        },
                        axisLabel: {
                                color:'#fff',// x轴字体颜色
                               
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            name:'今天',
                            data: [143, 144, 148, 145, 137, 158, 165],
                            itemStyle: {
                                    color: 'yellow' // 设置柱状图的颜色
                                }
                        },
                        {
                            type: 'bar',
                            name:'近三天',
                            data: [326, 304, 318,342, 323, 300, 327]
                        },
                        {
                            type: 'bar',
                            name:'近7天',
                            data: [545, 667, 789, 699, 837, 676,767]
                        },
                    ]
                }
          }
      },
      mounted(){
        this.$nextTick(() => {
                // if (this.chinachart == null) {
                    this.init()
                // }
            });
      },
      watch:{
        //监听有没有新的数据更新

      },
      methods:{
        init(){
          var mychart = echarts.init(this.$refs.mychart)
            //发起请求
            this.option.title.textStyle.color=this.color
            this.option.yAxis.axisLine.lineStyle.color=this.color
            this.option.xAxis.axisLine.lineStyle.color = this.color
            this.option.xAxis.axisLabel.color = this.color
            this.option.yAxis.axisLabel.color = this.color
          mychart.setOption(this.option)
        }
      }
  }
  </script>
  
  <style lang="less" scoped>
  
  
  </style>
  
  